<template>
  <div class="app-container customer-div">
    <el-menu :default-active="listQuery.tab" class="el-menu-demo" mode="horizontal" @select="handleSelect">
      <el-menu-item index="wait">待我处理</el-menu-item>
      <el-menu-item index="my">我的</el-menu-item>
      <el-menu-item index="all" v-if="isallSupplier">全部</el-menu-item>
      <el-menu-item index="seas">公海池</el-menu-item>
    </el-menu>

    <div style="margin-top: 40px">
      <!--搜索-->
      <el-form :inline="true" :model="listQuery" size="mini" label-width="120px">
        <el-form-item label="供应商名称：">
          <el-input v-model="listQuery.supplierName" clearable></el-input>
        </el-form-item>
        <el-form-item label="联系人：">
          <el-input v-model="listQuery.contactName" clearable></el-input>
        </el-form-item>
        <el-form-item label="负责人：">
          <el-select v-model="listQuery.chargeId" filterable placeholder="请选择" clearable>
            <el-option
              v-for="item in userOptionList"
              :key="item.userId"
              :label="item.userName"
              :value="item.userId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="创建时间：">
          <el-date-picker
            :default-time="['00:00:00', '23:59:59']"
            v-model="listQuery.createTime"
            type="daterange"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="跟进等级：">
          <el-select v-model="listQuery.supplierLevel" class="input-width" style="width:195px" placeholder="请选择" clearable>
            <el-option v-for="(item,index) in supplierLevelList" :key="index" :value="item" :label="item"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            @click="handleSearchList()"
            type="primary">
            查询
          </el-button>
          <el-button
            @click="toAddupplier('add')"
            type="primary">
            新增供应商
          </el-button>
        </el-form-item>
      </el-form>
    </div>

      <!--数据列表-->
      <div class="table-container">
        <div>
          <el-radio-group v-model="listQuery.supplierState" size="medium" @input="handleSearchList">
            <el-radio-button label="">全部</el-radio-button>
            <el-radio-button label="0">待准入</el-radio-button>
            <el-radio-button label="10">审核中</el-radio-button>
            <el-radio-button label="20">已准入</el-radio-button>
            <el-radio-button label="30">不予以准入</el-radio-button>
            <el-radio-button label="unSetProductionDate">未设置投产日期</el-radio-button>
          </el-radio-group>
        </div>
        <el-table
          v-loading="listLoading"
          :data="tableData"
          border
          style="width: 100%;margin-top:10px;">
          <el-table-column
            label="供应商"
            width="260"
            prop="supplierName">
          </el-table-column>
          <el-table-column
            align="center"
            label="供应商类型"
            width="150"
            prop="supplierType">
          </el-table-column>
          <el-table-column
            label="跟进等级"
            width="130"
            align="center"
            prop="supplierLevel">
          </el-table-column>
          <el-table-column
            label="预付款额度"
            width="130"
            align="center"
            prop="prePayAmount">
          </el-table-column>
          <el-table-column
            label="注册资金"
            width="150"
            align="center"
            prop="regMoney">
          </el-table-column>
          <el-table-column
            align="center"
            label="注册日期"
            width="120"
            prop="regDate">
          </el-table-column>
          <el-table-column
            min-width="200"
            label="供应商地址"
            prop="address">
          </el-table-column>
          <el-table-column
            prop="contactName"
            label="联系人名称"
            width="100"
            align="center">
          </el-table-column>
          <el-table-column
            prop="contactDuty"
            label="联系人职务"
            width="100"
            align="center">
          </el-table-column>
          <el-table-column
            prop="contactMobile"
            label="联系人电话"
            width="120"
            align="center">
          </el-table-column>
          <el-table-column
            label="负责人"
            width="200"
            align="center"
            prop="chargeName">
          </el-table-column>
          <el-table-column
            label="创建时间"
            width="150"
            align="center"
            prop="createTime">
          </el-table-column>
          <el-table-column
            align="center"
            label="创建人"
            width="100"
            prop="createrName">
          </el-table-column>
          <el-table-column
            fixed="right"
            align="center"
            label="准入状态"
            width="100">
            <template slot-scope="scope">
              {{scope.row.supplierState|filterSupplierState}}
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            align="center"
            label="信息完善度"
            width="100">
            <template slot-scope="scope">
              {{scope.row.completeRate}}
            </template>
          </el-table-column>
          <el-table-column
            width="200"
            fixed="right"
            label="操作"
            align="center">
            <template slot-scope="scope">
              <el-button
                v-if="listQuery.tab == 'my'"
                type="text"
                size="mini"
                @click="toAddupplier('edit',scope.row.supplierId)">编辑
              </el-button>
              <el-button
                type="text"
                size="mini"
                @click="toDetail(scope.row)">查看
              </el-button>
              <el-button
                v-if="scope.row.isCheck&&isExamine"
                type="text"
                size="mini"
                @click="examineSupplier(scope.row)">审核
              </el-button>
              <el-button
                v-if="listQuery.tab == 'my'"
                type="text"
                size="mini"
                @click="showSupplierGj('add',scope.row)">新增跟进
              </el-button>
              <el-button
                v-if="listQuery.tab == 'my'"
                type="text"
                size="mini"
                @click="moveOut(scope.row)">转公海
              </el-button>
              <el-popover
                v-if="listQuery.tab=='my' ||listQuery.tab=='all'"
                placement="bottom"
                width="280"
                trigger="click">
                <el-table :data="scope.row.contactList" @row-click="callContact" empty-text="暂无联系人" :row-style="{cursor:'pointer'}">
                  <el-table-column width="100" property="contactName" label="联系人">
                    <template v-slot="{row}">
                      <span class="pointerStyle">{{ row.contactName }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column width="150" property="contactMobile" label="电话">
                    <template v-slot="{row}">
                      <span class="pointerStyle">{{ row.contactMobile }}</span>
                    </template>
                  </el-table-column>
                </el-table>
                <el-button type="text" size="mini" slot="reference">外呼</el-button>
              </el-popover>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total, sizes,prev, pager, next,jumper"
        :current-page.sync="listQuery.pageNum"
        :page-size="listQuery.pageSize"
        :page-sizes="[10,15,20]"
        :total="count">
      </el-pagination>
    </div>
    <!-- 审核 -->
    <el-dialog
      :close-on-click-modal="false"
      :visible.sync="examineDialog"
      title="供应商审核"
      width="400px">
      <div style="max-height: 500px;overflow: auto">
        <el-form size="mini" label-width="60px" ref="SHForm" :model="SHForm" :rules="SHRules">
          <div style="color:#e6a23c;margin-bottom:10px;text-align:center;">若退回，请备注原因</div>
          <el-form-item label="备注：" prop="checkRemark">
            <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入内容"
              v-model="SHForm.checkRemark">
            </el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer" style="text-align: right">
          <el-button type="warning" @click="backExamine" :loading="btnLoading1" size="small">退 回</el-button>
          <el-button type="primary" @click="agreeExamine" :loading="btnLoading2" size="small">通 过</el-button>
        </div>
      </div>
    </el-dialog>
    <!-- 新增跟进 -->
    <addSupplierGj ref="addSupplierGj" @update="getList"></addSupplierGj>

    <!-- 直接外呼 -->
    <outboundCall ref="outboundCallRef"></outboundCall>
  </div>
</template>
<script>
import { getOrderUsersList } from '@/api/partner';
import { supplierListApi,supplierCheckAPI,supplierConstantAPI,moveOutApi } from '@/api/company';
import { formatDate } from '@/utils/date';
import store from '@/store';
import { mapGetters } from 'vuex';
import addSupplierGj from './components/addSupplierGj.vue';
import outboundCall from '@/views/fms/components/outboundCall.vue';
const defaultListQuery = {
  pageNum: 1,
  pageSize: 10,
  supplierName: '',
  contactName: '',
  createTime: null,
  chargeId: '',
  accountPeriod: '',
  oralAbidance: '',
  contractAbidance: '',
  supplierLevel: '',
  supplierState: '',//准入状态
  tab: 'wait',
};
export default {
  name: "index",
  data() {
    return {
      radio2: 'all',
      listQuery: JSON.parse(JSON.stringify(defaultListQuery)),
      tableData: [],
      count: 0,
      listLoading: false,
      customerStateList: [],
      userOptionList: [],
      roles: store.getters.roles ? store.getters.roles : [],
      orderStateList: [],
      JDupdate: '',
      listAmount: 0,
      supplierLevelList:[],
      examineDialog: false,
      btnLoading1: false,
      SHForm: {
        supplierId:'',
        checkState:'',
        checkRemark:''
      },
      SHRules: {
        checkRemark: [
          { required: true, message: '请输入退回原因', trigger: 'blur' },
        ],
      },
      btnLoading2:false
    }
  },
  components: {
    addSupplierGj,outboundCall
  },
  computed: {
    ...mapGetters([
      'name',
      'mobile',
      'userId',
      'isMange',
    ]),
    isExamine() {
      if (this.roles.indexOf("supplierCheck") != -1) {
        return true
      } else {
        return false
      }
    },
    isallSupplier() {
      if (this.roles.indexOf("allSupplier") != -1) {
        return true
      } else {
        return false
      }
    },
  },
  created() {
    this.getList();
    this.getUserOptionList();
    this.getSupplierLevelList();
  },
  filters: {
    filterSupplierState(val) {
      if (val == 0) {
        return '待准入'
      } else if (val == 10 || val == 15) {
        return '审核中'
      } else if (val == 20) {
        return '已准入'
      } else if (val == 30) {
        return '不予以准入'
      }
    }
  },
  methods: {
    // 客户外呼
    callContact(row) {
      this.$refs.outboundCallRef.showPop(row)
    },
    moveOut(item){
      console.log(item)
      moveOutApi({supplierId:item.supplierId}).then((res)=>{
        this.$message.success('已转入公海池');
        this.getList();
      })
    },
    // 新增跟进
    showSupplierGj(type,item) {
      if (type == 'add') {
        this.$refs.addSupplierGj.showPop(type,item)
      }
    },
    // 供应商审核
    examineSupplier(item) {
      this.examineDialog = true;
      this.SHForm.supplierId = item.supplierId;
      this.$refs.SHForm.resetFields();
    },
    agreeExamine() {
      this.SHForm.checkState = 20;
      this.handleExamine();
    },
    backExamine() {
      this.$refs.SHForm.validate((valid) => {
        if (valid) {
          this.SHForm.checkState = 30;
          this.handleExamine();
        }
      })
    },
    handleExamine() {
      if(this.SHForm.checkState == 30){
        this.btnLoading1 = true;
      }else{
        this.btnLoading2 = true;
      }

      supplierCheckAPI(this.SHForm).then((res) => {
        this.btnLoading1 = false;
        this.btnLoading2 = false;
        this.examineDialog = false;
        this.$message.success('操作成功');
        this.getList();
      }).catch(() => {
        this.btnLoading1 = false;
        this.btnLoading2 = false;
      })
    },

    //获取供应商等级列表
    getSupplierLevelList() {
      supplierConstantAPI().then((res) => {
        this.supplierLevelList = res.supplierLevel;
      })
    },

    //获取员工下拉选项
    getUserOptionList() {
      getOrderUsersList().then((res) => {
        this.userOptionList = res;
      })
    },

    //选择员工名称
    handleSelectUserName(key, item) {
      this.listQuery[key] = item.userId;
    },

    /**
     * 切换选择状态
     */
    handleSelect(key, keyPath) {
      this.listQuery = JSON.parse(JSON.stringify(defaultListQuery)),
        this.listQuery.tab = key;
        this.handleSearchList();
    },
    handleSizeChange(val) {
      this.listQuery.pageNum = 1;
      this.listQuery.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.pageNum = val;
      this.getList();
    },

    handleSearchList() {
      this.listQuery.pageNum = 1;
      this.getList();
    },

    //获取列表
    getList() {
      this.listLoading = true;
      supplierListApi(this.listQuery).then(response => {
        this.tableData = response.list;
        this.count = response.count;
        this.listLoading = false;
      }).catch(() => {
        this.listLoading = false;
      });
    },

    //去详情页
    toDetail(item) {
      let routeData = this.$router.resolve({ name: 'supplierInfo', query: { id: item.supplierId } });
      window.open(routeData.href);
    },

    toAddupplier(type, id) {
      if (type == 'add') {
        this.$router.push({ name: 'addSupplier', query: { type: type } })
      } else {
        this.$router.push({ name: 'addSupplier', query: { type: type, id: id } })
      }
    },

  },
};
</script>

<style scoped lang="scss">

</style>
